<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/page/8/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-CSS进阶知识点-CSS3基本选择器及属性选择器" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/14/CSS进阶知识点-CSS3基本选择器及属性选择器/" class="article-date">
  <time datetime="2019-08-14T00:32:50.000Z" itemprop="datePublished">2019-08-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS3/">CSS3</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/14/CSS进阶知识点-CSS3基本选择器及属性选择器/">CSS进阶知识点--CSS3基本选择器及属性选择器</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="基本选择器"><a href="#基本选择器" class="headerlink" title="基本选择器"></a>基本选择器</h1><ul>
<li><p>通配符选择器</p>
</li>
<li><p>元素选择器</p>
</li>
<li><p>类选择器</p>
</li>
<li><p>ID选择器</p>
</li>
<li><p>后代选择器</p>
</li>
<li><p>子元素选择器</p>
</li>
<li><p>相邻兄弟选择器</p>
</li>
<li><p>通用兄弟选择器</p>
</li>
<li><p>群组选择器</p>
</li>
</ul>
<p>前五个请参考<a href="https://youchen12138.github.io/2019/07/31/CSS基础知识点-选择器/" target="_blank" rel="noopener">CSS基础知识点–选择器</a></p>
<h2 id="子元素选择器"><a href="#子元素选择器" class="headerlink" title="子元素选择器"></a>子元素选择器</h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>子元素选择器只能选择某元素的子元素</p>
<h3 id="语法格式"><a href="#语法格式" class="headerlink" title="语法格式"></a>语法格式</h3><blockquote>
<p>父元素 &gt; 子元素（father &gt; child）</p>
</blockquote>
<h2 id="相邻兄弟选择器"><a href="#相邻兄弟选择器" class="headerlink" title="相邻兄弟选择器"></a>相邻兄弟选择器</h2><h3 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h3><p>相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素</p>
<h3 id="语法格式-1"><a href="#语法格式-1" class="headerlink" title="语法格式"></a>语法格式</h3><blockquote>
<p>元素 + 兄弟相邻元素（Element + Sibling）</p>
</blockquote>
<h2 id="通用兄弟选择器"><a href="#通用兄弟选择器" class="headerlink" title="通用兄弟选择器"></a>通用兄弟选择器</h2><h3 id="概念-2"><a href="#概念-2" class="headerlink" title="概念"></a>概念</h3><p>选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素</p>
<h3 id="语法格式-2"><a href="#语法格式-2" class="headerlink" title="语法格式"></a>语法格式</h3><blockquote>
<p>元素 ~ 后面所有兄弟相邻元素（Element ~ Sibling）</p>
</blockquote>
<h2 id="群组选择器"><a href="#群组选择器" class="headerlink" title="群组选择器"></a>群组选择器</h2><h3 id="概念-3"><a href="#概念-3" class="headerlink" title="概念"></a>概念</h3><p>群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号”,”隔开</p>
<h3 id="语法格式-3"><a href="#语法格式-3" class="headerlink" title="语法格式"></a>语法格式</h3><p>元素1，元素2，…，元素n（Element1,Element2,…,Element3）</p>
<h1 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h1><p>对带有制定属性的 HTML 元素设置样式</p>
<p>使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值</p>
<h2 id="Element-attribute"><a href="#Element-attribute" class="headerlink" title="Element[attribute]"></a>Element[attribute]</h2><h3 id="概念-4"><a href="#概念-4" class="headerlink" title="概念"></a>概念</h3><p>选择所有带有 attribute 属性元素</p>
<h2 id="Element-attribute-”value”"><a href="#Element-attribute-”value”" class="headerlink" title="Element[attribute~=”value”]"></a>Element[attribute~=”value”]</h2><h3 id="概念-5"><a href="#概念-5" class="headerlink" title="概念"></a>概念</h3><p>选择 attribute 属性有单词”value”的所有元素（属性不止一个属性值，其中一个属性值为”value”）</p>
<p>注意：该属性选择器用于选取属性值中包含指定词汇的元素，只要是指定的属性，并且属性值列表中包含value，而不是在某个值中以value开头或结尾</p>
<h2 id="Element-attribute-”value”-1"><a href="#Element-attribute-”value”-1" class="headerlink" title="Element[attribute^=”value”]"></a>Element[attribute^=”value”]</h2><h3 id="概念-6"><a href="#概念-6" class="headerlink" title="概念"></a>概念</h3><p>选择 attribute 属性值以”value”开头的所有元素</p>
<p>注意：该属性选择器匹配指定属性的指定value值开头的元素，如果class中有多个value值，第一个值中的第一个字母不是指定的值，即使后面的属性中首字母是指定的值，那么也不能匹配上</p>
<h2 id="Element-attribute-”value”-2"><a href="#Element-attribute-”value”-2" class="headerlink" title="Element[attribute$=”value”]"></a>Element[attribute$=”value”]</h2><h3 id="概念-7"><a href="#概念-7" class="headerlink" title="概念"></a>概念</h3><p>选择 attribute 属性值以”value”结尾的所有元素</p>
<h2 id="Element-attribute-”value”-3"><a href="#Element-attribute-”value”-3" class="headerlink" title="Element[attribute*=”value”]"></a>Element[attribute*=”value”]</h2><h3 id="概念-8"><a href="#概念-8" class="headerlink" title="概念"></a>概念</h3><p>选择 attribute 属性值包含”value”的所有元素（属性值中的单词包含）</p>
<h2 id="Element-attribute-”value”-4"><a href="#Element-attribute-”value”-4" class="headerlink" title="Element[attribute|=”value”]"></a>Element[attribute|=”value”]</h2><h3 id="概念-9"><a href="#概念-9" class="headerlink" title="概念"></a>概念</h3><p>选择 attribute 属性值为”value”或以”value”开头的元素</p>
<table>
<thead>
<tr>
<th>属性选择器</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>Element[<code>attribute</code>]</td>
<td>选择所有带有 attribute 属性元素</td>
</tr>
<tr>
<td>Element[<code>attribute~=&quot;value&quot;</code>]</td>
<td>选择 attribute 属性有单词”value”的所有元素（属性不止一个属性值，其中一个属性值为”value”）</td>
</tr>
<tr>
<td>Element[<code>attribute^=&quot;value&quot;</code>]</td>
<td>选择 attribute 属性值以”value”开头的所有元素</td>
</tr>
<tr>
<td>Element[<code>attribute$=&quot;value&quot;</code>]</td>
<td>选择 attribute 属性值以”value”结尾的所有元素</td>
</tr>
<tr>
<td>Element[<code>attribute*=&quot;value&quot;</code>]</td>
<td>选择 attribute 属性值包含”value”的所有元素（属性值中的单词包含）</td>
</tr>
<tr>
<td>Element[`attribute</td>
<td>=”value”`]</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/14/CSS进阶知识点-CSS3基本选择器及属性选择器/" data-id="ck4r400ns0010l0w03l7cyr35" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS3/">CSS3</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML进阶知识点-HTML5属性变化" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/11/HTML进阶知识点-HTML5属性变化/" class="article-date">
  <time datetime="2019-08-11T07:57:56.000Z" itemprop="datePublished">2019-08-11</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML5/">HTML5</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/11/HTML进阶知识点-HTML5属性变化/">HTML进阶知识点--HTML5属性变化</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="input标签type属性新增属性值"><a href="#input标签type属性新增属性值" class="headerlink" title="input标签type属性新增属性值"></a>input标签type属性新增属性值</h2><table>
<thead>
<tr>
<th>属性值</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>tel</td>
<td>手机端不同</td>
</tr>
<tr>
<td>email</td>
<td>手机端键盘出现@</td>
</tr>
<tr>
<td>number</td>
<td>出现按钮，可以加减</td>
</tr>
<tr>
<td>url</td>
<td>手机端键盘出现<code>.com</code></td>
</tr>
<tr>
<td>Date</td>
<td>选取日、月、年</td>
</tr>
<tr>
<td>Month</td>
<td>选取月、年</td>
</tr>
<tr>
<td>Week</td>
<td>选取周和年 <font color="red">不实用</font></td>
</tr>
<tr>
<td>Time</td>
<td>选取时间（小时和分钟）</td>
</tr>
<tr>
<td>Datatime</td>
<td>选取时间、日、月、年（UTC时间） <font color="red">不实用</font></td>
</tr>
<tr>
<td>Datatime-local</td>
<td>选取时间、日、月、年（本地时间）</td>
</tr>
<tr>
<td>range</td>
<td>一个可拉伸的进度条（pc端）</td>
</tr>
<tr>
<td>search</td>
<td>搜索框（pc端）</td>
</tr>
<tr>
<td>color</td>
<td>颜色选择框（pc端）</td>
</tr>
</tbody></table>
<h2 id="表单新增属性"><a href="#表单新增属性" class="headerlink" title="表单新增属性"></a>表单新增属性</h2><h3 id="autocomplete属性"><a href="#autocomplete属性" class="headerlink" title="autocomplete属性"></a>autocomplete属性</h3><p>form 或 input 域应该拥有自动完成功能</p>
<blockquote>
<p><code>&lt;form autocomplete=&quot;on&quot;&gt;&lt;/form&gt;</code></p>
</blockquote>
<p>注意：autocomplete 适用于 <code>&lt;form&gt;</code> 标签，以及以下类型的 <code>&lt;input&gt;</code> 标签：text、search、url、telephone、email、password、datepickers、range、color</p>
<h3 id="autofocus属性"><a href="#autofocus属性" class="headerlink" title="autofocus属性"></a>autofocus属性</h3><ul>
<li><p>规定在页面加载时，域自动地获取焦点</p>
</li>
<li><p>autofocus 属性适用于所有 <code>&lt;input&gt;</code> 标签的类型</p>
</li>
</ul>
<p>语法：</p>
<blockquote>
<p><code>&lt;input autofocus=&quot;autofocus&gt;</code></p>
</blockquote>
<h3 id="multiple属性"><a href="#multiple属性" class="headerlink" title="multiple属性"></a>multiple属性</h3><p>规定输入域中可选择多个值</p>
<p>PS：multiple 属性适用于以下类型的 <code>&lt;input&gt;</code> 标签：email 和 file</p>
<blockquote>
<p><code>&lt;input type=&quot;file&quot; multiple=&quot;multiple&quot;&gt;</code></p>
</blockquote>
<h3 id="placeholder属性"><a href="#placeholder属性" class="headerlink" title="placeholder属性"></a>placeholder属性</h3><p>提供一种提示（hint），描述输入框所期待的值</p>
<p>PS：适用于 <code>&lt;input&gt;</code> 标签 type 属性值为：text、search、url、tel、email、password</p>
<h3 id="required属性"><a href="#required属性" class="headerlink" title="required属性"></a>required属性</h3><p>规定必须在提交之前填写输入域（不能为空）</p>
<blockquote>
<p><code>&lt;input type=&quot;text&quot; required=&quot;required&quot;&gt;</code></p>
</blockquote>
<p>减少前端开发人员写表单验证的压力</p>
<p>PS：适用于 <code>&lt;input&gt;</code> 标签 type 属性值为：text、search、url、tel、email、password、datepickers、number、checkbox、radio、file</p>
<h2 id="链接新增属性"><a href="#链接新增属性" class="headerlink" title="链接新增属性"></a>链接新增属性</h2><ol>
<li><p><code>&lt;link&gt;</code> 的sizes</p>
</li>
<li><p><code>&lt;base&gt;</code> 的target</p>
<ul>
<li>base 标签如果设置了 target 属性，就可以控制整个页面所有超链接的跳转方式</li>
</ul>
</li>
<li><p><code>&lt;a&gt;</code> 标签</p>
<ul>
<li><p>media = “”（表示对设备进行优化，handheld 对“手持”设备进行支持，tv 对“电视”设备进行支持</p>
</li>
<li><p>hreflang = “zh”（设置语言，这里设置语言是中文）</p>
</li>
<li><p>rel = “external”（设置超链接的引用，这里超链接为外部链接）</p>
</li>
</ul>
</li>
</ol>
<h2 id="其他属性"><a href="#其他属性" class="headerlink" title="其他属性"></a>其他属性</h2><h3 id="script"><a href="#script" class="headerlink" title="script"></a>script</h3><ul>
<li><p>defer：规定当页面已完成加载后，才会执行脚本</p>
</li>
<li><p>async：规定一旦脚本可用，将会异步执行</p>
</li>
</ul>
<h3 id="ol"><a href="#ol" class="headerlink" title="ol"></a>ol</h3><table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>start</td>
<td>起始值</td>
</tr>
<tr>
<td>reversed</td>
<td>倒序排列</td>
</tr>
</tbody></table>
<h3 id="html"><a href="#html" class="headerlink" title="html"></a>html</h3><p>manifest = “cache.manifest”（定义页面离线应用文件）（引号中内容cache可更改）</p>
<blockquote>
<p><code>&lt;html manifest=&quot;cache.manifest&quot;&gt;</code></p>
</blockquote>
<h3 id="style"><a href="#style" class="headerlink" title="style"></a>style</h3><p>scoped：内嵌CSS</p>
<p>可以写在html文件的任意位置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;style scoped&gt;</span><br><span class="line">    ...</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/11/HTML进阶知识点-HTML5属性变化/" data-id="ck4r400pq0048l0w04cm565yz" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML5/">HTML5</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML进阶知识点-HTML5标签变化" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/10/HTML进阶知识点-HTML5标签变化/" class="article-date">
  <time datetime="2019-08-10T10:56:45.000Z" itemprop="datePublished">2019-08-10</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML5/">HTML5</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/10/HTML进阶知识点-HTML5标签变化/">HTML进阶知识点--HTML5标签变化</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="HTML-lt-DOCTYPE-gt-标签"><a href="#HTML-lt-DOCTYPE-gt-标签" class="headerlink" title="HTML &lt;!DOCTYPE&gt; 标签"></a>HTML <code>&lt;!DOCTYPE&gt;</code> 标签</h2><h3 id="定义和用法"><a href="#定义和用法" class="headerlink" title="定义和用法"></a>定义和用法</h3><p><code>&lt;!DOCTYPE&gt;</code>声明必须是 HTML 文档的第一行，位于<code>&lt;html&gt;</code>标签之前</p>
<h3 id="不是HTML标签"><a href="#不是HTML标签" class="headerlink" title="不是HTML标签"></a>不是HTML标签</h3><p>指示　web　浏览器关于页面使用哪个　HTML　版本进行编写的指令</p>
<h2 id="文档类型定义（DTD）"><a href="#文档类型定义（DTD）" class="headerlink" title="文档类型定义（DTD）"></a>文档类型定义（DTD）</h2><h3 id="DTD"><a href="#DTD" class="headerlink" title="DTD"></a>DTD</h3><p>DTD 可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构</p>
<h3 id="在HTML中"><a href="#在HTML中" class="headerlink" title="在HTML中"></a>在HTML中</h3><p>DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容</p>
<h3 id="HTML5"><a href="#HTML5" class="headerlink" title="HTML5"></a>HTML5</h3><p>HTML5 不基于 SGML，所以不需要引用 DTD</p>
<h1 id="HTML5新增标签"><a href="#HTML5新增标签" class="headerlink" title="HTML5新增标签"></a>HTML5新增标签</h1><h2 id="结构标签"><a href="#结构标签" class="headerlink" title="结构标签"></a>结构标签</h2><p>结构标签（块级元素）——有意义的div</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;article&gt;</code></td>
<td>标记定义一篇文章</td>
</tr>
<tr>
<td><code>&lt;header&gt;</code></td>
<td>标记定义一个页面或一个区域的头部</td>
</tr>
<tr>
<td><code>&lt;nav&gt;</code></td>
<td>标记定义导航链接</td>
</tr>
<tr>
<td><code>&lt;section&gt;</code></td>
<td>标记定义一个区域</td>
</tr>
<tr>
<td><code>&lt;aside&gt;</code></td>
<td>标记定义页面内容部分的侧边栏</td>
</tr>
<tr>
<td><code>&lt;hgroup&gt;</code></td>
<td>标记定义文件中一个区块的相关信息</td>
</tr>
<tr>
<td><code>&lt;figure&gt;</code></td>
<td>标记定义一组媒体内容以及它们的标题</td>
</tr>
<tr>
<td><code>&lt;figcaption&gt;</code></td>
<td>标签定义figure元素的标题</td>
</tr>
<tr>
<td><code>&lt;footer&gt;</code></td>
<td>标记定义一个页面或一个区域的底部</td>
</tr>
<tr>
<td><code>&lt;dialog&gt;</code></td>
<td>标记定义一个对话框（会话框）类似微信</td>
</tr>
</tbody></table>
<h2 id="多媒体标签"><a href="#多媒体标签" class="headerlink" title="多媒体标签"></a>多媒体标签</h2><table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;video&gt;</code></td>
<td>标记定义一个视频</td>
</tr>
<tr>
<td><code>&lt;audio&gt;</code></td>
<td>标记定义音频内容</td>
</tr>
<tr>
<td><code>&lt;source&gt;</code></td>
<td>标记定义媒体资源</td>
</tr>
<tr>
<td><code>&lt;canvas&gt;</code></td>
<td>标记定义图片（诸多API）</td>
</tr>
<tr>
<td><code>&lt;embed&gt;</code></td>
<td>标记定义外部的可交互的内容或插件，比如 flash</td>
</tr>
</tbody></table>
<p><code>&lt;video&gt;</code>和<code>&lt;audio&gt;</code>可以嵌套<code>&lt;source&gt;</code>，<code>&lt;source&gt;</code>标签主要用来存放视频资源和文件转码</p>
<h3 id="标签意义"><a href="#标签意义" class="headerlink" title="标签意义"></a>标签意义</h3><p>多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验</p>
<h3 id="audio标签和video标签常用属性"><a href="#audio标签和video标签常用属性" class="headerlink" title="audio标签和video标签常用属性"></a>audio标签和video标签常用属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>src</td>
<td>音频或视频路径</td>
</tr>
<tr>
<td>autoplay</td>
<td>自动播放</td>
</tr>
<tr>
<td>loop</td>
<td>重复几次（当值为-1时，无限重复）</td>
</tr>
<tr>
<td>controls</td>
<td>出现控制音频的进度条</td>
</tr>
</tbody></table>
<h3 id="source标签常用属性"><a href="#source标签常用属性" class="headerlink" title="source标签常用属性"></a>source标签常用属性</h3><h4 id="type属性"><a href="#type属性" class="headerlink" title="type属性"></a>type属性</h4><p>type属性规定媒体资源的类型。</p>
<p>常用的类型：</p>
<ol>
<li><p>用于视频：</p>
<ul>
<li><p>video/ogg</p>
</li>
<li><p>video/mp4</p>
</li>
<li><p>video/webm</p>
</li>
</ul>
</li>
<li><p>用于音频：</p>
<ul>
<li><p>audio/ogg</p>
</li>
<li><p>audio/mpeg</p>
</li>
</ul>
</li>
</ol>
<hr>
<h2 id="Web应用标签"><a href="#Web应用标签" class="headerlink" title="Web应用标签"></a>Web应用标签</h2><h3 id="状态标签"><a href="#状态标签" class="headerlink" title="状态标签"></a>状态标签</h3><table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;meter&gt;</code></td>
<td>实时状态显示：气压、气温</td>
</tr>
<tr>
<td><code>&lt;progress&gt;</code></td>
<td>任务过程：安装、加载</td>
</tr>
</tbody></table>
<h4 id="meter标签常用属性"><a href="#meter标签常用属性" class="headerlink" title="meter标签常用属性"></a>meter标签常用属性</h4><table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>value</td>
<td>表示进度当前的值</td>
</tr>
<tr>
<td>min</td>
<td>进度条最小值</td>
</tr>
<tr>
<td>max</td>
<td>进度条最大值</td>
</tr>
<tr>
<td>low</td>
<td>低于此值将会出现样式变化，类似气温过低，气温测量器会报警</td>
</tr>
<tr>
<td>high</td>
<td>高于此值将会出现样式变化，类似气温过高，气温测量器会报警</td>
</tr>
<tr>
<td>optimum</td>
<td>标准值（最适宜）</td>
</tr>
</tbody></table>
<hr>
<h3 id="列表标签"><a href="#列表标签" class="headerlink" title="列表标签"></a>列表标签</h3><table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;datalist&gt;</code></td>
<td>为 input 标记定义一个下拉菜单，配合 option</td>
</tr>
<tr>
<td><code>&lt;details&gt;</code></td>
<td>标记定义一个元素的详细内容</td>
</tr>
</tbody></table>
<h4 id="datalist使用"><a href="#datalist使用" class="headerlink" title="datalist使用"></a>datalist使用</h4><p>input的list与datalist的id一样</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;input list=&quot;a&quot;&gt;</span><br><span class="line">&lt;datalist id=&quot;a&quot;&gt;</span><br><span class="line">    &lt;option&gt;雪佛兰&lt;/option&gt;</span><br><span class="line">    &lt;option&gt;大众&lt;/option&gt;</span><br><span class="line">    &lt;option&gt;现代&lt;/option&gt;</span><br><span class="line">&lt;/datalist&gt;</span><br></pre></td></tr></table></figure>

<input list="a">
<datalist id="a">
    <option>雪佛兰</option>
    <option>大众</option>
    <option>现代</option>
</datalist>

<h4 id="details使用"><a href="#details使用" class="headerlink" title="details使用"></a>details使用</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;details&gt;</span><br><span class="line">    &lt;summary&gt;展开&lt;/summary&gt;</span><br><span class="line">    &lt;p&gt;12344&lt;/p&gt;</span><br><span class="line">&lt;/details&gt;</span><br></pre></td></tr></table></figure>

<details>
    <summary>展开</summary>
    <p>12344</p>
</details>

<hr>
<h2 id="注释标签"><a href="#注释标签" class="headerlink" title="注释标签"></a>注释标签</h2><table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;ruby&gt;</code></td>
<td>标记定义注释或音标</td>
</tr>
<tr>
<td><code>&lt;rt&gt;</code></td>
<td>标记定义对ruby的注释内容文本</td>
</tr>
<tr>
<td><code>&lt;rp&gt;</code></td>
<td>告诉那些不支持 ruby 元素的浏览器如何去显示</td>
</tr>
</tbody></table>
<h3 id="注释标签的使用"><a href="#注释标签的使用" class="headerlink" title="注释标签的使用"></a>注释标签的使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;ruby&gt;魑&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;chi&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</span><br></pre></td></tr></table></figure>

<p><ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby></p>
<hr>
<h2 id="其他标签"><a href="#其他标签" class="headerlink" title="其他标签"></a>其他标签</h2><table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;mark&gt;</code></td>
<td>标记定义有标记的文本（黄色选中状态）</td>
</tr>
<tr>
<td><code>&lt;output&gt;</code></td>
<td>标记定义一些输出类型，计算表单结果配合 oninput 事件</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/10/HTML进阶知识点-HTML5标签变化/" data-id="ck4r400pr004al0w0qyyfum2r" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML5/">HTML5</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-网页布局" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/08/CSS基础知识点-网页布局/" class="article-date">
  <time datetime="2019-08-08T12:05:52.000Z" itemprop="datePublished">2019-08-08</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/08/CSS基础知识点-网页布局/">CSS基础知识点--网页布局</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="布局模型"><a href="#布局模型" class="headerlink" title="布局模型"></a>布局模型</h2><ul>
<li><p>两列布局</p>
</li>
<li><p>三列布局</p>
</li>
<li><p>圣杯布局</p>
</li>
<li><p>双飞翼布局</p>
</li>
</ul>
<h3 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h3><ol>
<li><p>三列布局，中间宽度自适应，两边定宽</p>
</li>
<li><p>中间栏要在浏览器优先展示渲染</p>
</li>
<li><p>允许任意列的高度最高</p>
</li>
<li><p>用最简单的CSS、最少的HACK语句</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/08/CSS基础知识点-网页布局/" data-id="ck4r400nd000gl0w0k8ut6i6w" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-CSS定位-position" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/06/CSS基础知识点-CSS定位-position/" class="article-date">
  <time datetime="2019-08-06T13:48:01.000Z" itemprop="datePublished">2019-08-06</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/06/CSS基础知识点-CSS定位-position/">CSS基础知识点--CSS定位(position)</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="定位模型"><a href="#定位模型" class="headerlink" title="定位模型"></a>定位模型</h2><ul>
<li><p>static：自然模型</p>
</li>
<li><p>relative：相对定位模型</p>
</li>
<li><p>absolute：绝对定位模型</p>
</li>
<li><p>fixed：固定定位模型</p>
</li>
<li><p>sticky：磁贴定位模型</p>
</li>
</ul>
<h2 id="static模型"><a href="#static模型" class="headerlink" title="static模型"></a>static模型</h2><p>静态定位 / 常规定位 / 自然定位</p>
<p>特点：</p>
<ol>
<li><p>忽略掉top、bottom、left、right 或者 z-index 声明</p>
</li>
<li><p>两个相邻的元素如果都设置了外边距，那么最终外边距 = 两者外边距中最大的</p>
</li>
<li><p>具有固定 width 和 height 值的元素，如果把左右外边距设置为 auto ，则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块居中</p>
</li>
</ol>
<h2 id="relative模型和absolute模型"><a href="#relative模型和absolute模型" class="headerlink" title="relative模型和absolute模型"></a>relative模型和absolute模型</h2><p>特点：</p>
<ol>
<li><p>relative模型（相对定位）：不脱离常规流</p>
</li>
<li><p>absolute模型（绝对定位）：脱离常规流</p>
</li>
<li><p>若父元素是相对定位，并且子元素是绝对定位，那么子元素的绝对定位是相对父元素</p>
</li>
<li><p>继上一个特点情况，若是想要实现子元素的块垂直或水平居中</p>
<ul>
<li><p>right 为 0 ，并且 left 为 0 ，margin 为 0 auto。实现水平居中</p>
</li>
<li><p>top 为 0 ，并且 bottom 为 0 ，margin 为 auto 0。实现垂直居中</p>
</li>
<li><p>top、right、bottom、left 均为 0，margin 为auto。实现水平垂直居中 </p>
</li>
<li><p>若 top、right、bottom、left 均为 auto，则会变为常规流（疑似有问题）</p>
</li>
</ul>
</li>
<li><p>定位的垂直水平居中，<font color="red">必须写定位模式</font></p>
<ul>
<li><p>需要给元素设置 top：50%，然后再 margin-top:负本身高度的一半。实现垂直居中</p>
</li>
<li><p>需要给元素设置 left：50%，然后再 margin-left:负本身宽度的一半。实现水平居中</p>
</li>
</ul>
</li>
</ol>
<h2 id="fix模型"><a href="#fix模型" class="headerlink" title="fix模型"></a>fix模型</h2><p>有些类似于 background-attachment 属性</p>
<h2 id="sticky模型（CSS3）"><a href="#sticky模型（CSS3）" class="headerlink" title="sticky模型（CSS3）"></a>sticky模型（CSS3）</h2><p>磁贴定位 / 粘性定位 / 吸附定位</p>
<p>作用：relative + fixed 的完美结合，制造出吸附效果</p>
<p>特点：</p>
<ol>
<li><p>如果产生偏移，原位置还是会在常规流中</p>
</li>
<li><p>如果它的最近父元素有滚动，那么它的偏移标尺就是最近的父元素</p>
</li>
<li><p>如果最近父元素没有滚动，那么它的偏移标尺是视口</p>
</li>
<li><p>上下左右的偏移规则</p>
</li>
<li><p>top等定位属性更像是条件，而非是坐标</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/06/CSS基础知识点-CSS定位-position/" data-id="ck4r400n60005l0w063r8r794" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-float浮动" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/06/CSS基础知识点-float浮动/" class="article-date">
  <time datetime="2019-08-06T08:50:58.000Z" itemprop="datePublished">2019-08-06</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/06/CSS基础知识点-float浮动/">CSS基础知识点--float浮动</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="CSS定位机制"><a href="#CSS定位机制" class="headerlink" title="CSS定位机制"></a>CSS定位机制</h2><ul>
<li><p>普通流（标准流）</p>
</li>
<li><p>浮动</p>
</li>
<li><p>绝对定位</p>
</li>
</ul>
<h3 id="普通流"><a href="#普通流" class="headerlink" title="普通流"></a>普通流</h3><p><font color="pink">普通流（标准流）</font>：默认状态，元素自动从左到右，从上往下的排列</p>
<h3 id="CSS-Float（浮动）的基础知识"><a href="#CSS-Float（浮动）的基础知识" class="headerlink" title="CSS Float（浮动）的基础知识"></a>CSS Float（浮动）的基础知识</h3><ul>
<li><p>会使元素向左或向右移动，只能左右，不能上下</p>
</li>
<li><p>浮动元素碰到包含框或另一个浮动框，浮动停止</p>
</li>
<li><p>浮动元素之后的元素将围绕它，之前的不受影响</p>
</li>
<li><p>浮动元素会脱离标准流</p>
</li>
</ul>
<h3 id="浮动的基本语法"><a href="#浮动的基本语法" class="headerlink" title="浮动的基本语法"></a>浮动的基本语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">float：left     靠左浮动</span><br><span class="line"></span><br><span class="line">float：right    靠右浮动</span><br><span class="line"></span><br><span class="line">float：none     不使用浮动</span><br></pre></td></tr></table></figure>

<h3 id="使用浮动后产生的问题"><a href="#使用浮动后产生的问题" class="headerlink" title="使用浮动后产生的问题"></a>使用浮动后产生的问题</h3><p>元素使用浮动后会脱离普通流，出现“高度塌陷”，也叫做浮动溢出。</p>
<h2 id="清除浮动语法"><a href="#清除浮动语法" class="headerlink" title="清除浮动语法"></a>清除浮动语法</h2><blockquote>
<p>clear：none | left | right | both</p>
</blockquote>
<h3 id="为什么要清除浮动"><a href="#为什么要清除浮动" class="headerlink" title="为什么要清除浮动"></a>为什么要清除浮动</h3><p>设置了float的元素会影响其他相邻元素，需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响！</p>
<h3 id="清除浮动的常用方法"><a href="#清除浮动的常用方法" class="headerlink" title="清除浮动的常用方法"></a>清除浮动的常用方法</h3><h4 id="方法一：在浮动元素后使用一个空元素"><a href="#方法一：在浮动元素后使用一个空元素" class="headerlink" title="方法一：在浮动元素后使用一个空元素"></a>方法一：在浮动元素后使用一个空元素</h4><p>例如：<code>&lt;div class=&quot;clear&gt;&lt;/div&gt;</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.clear&#123;</span><br><span class="line">    clear:both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="方法二：给浮动元素的容器添加-overflow：hidden；"><a href="#方法二：给浮动元素的容器添加-overflow：hidden；" class="headerlink" title="方法二：给浮动元素的容器添加 overflow：hidden；"></a>方法二：给浮动元素的容器添加 overflow：hidden；</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">*zoom:1     //触发 hasLayout 兼容 IE 6、7</span><br></pre></td></tr></table></figure>

<h4 id="方法三：使用CSS3的-after-伪元素"><a href="#方法三：使用CSS3的-after-伪元素" class="headerlink" title="方法三：使用CSS3的 :after 伪元素"></a>方法三：使用CSS3的 :after 伪元素</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.clearfix:after&#123;</span><br><span class="line">    content:&quot;.&quot;;</span><br><span class="line">    display:block;</span><br><span class="line">    height:0;</span><br><span class="line">    visibility:hidden;</span><br><span class="line">    clear:both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="清除浮动其他方法"><a href="#清除浮动其他方法" class="headerlink" title="清除浮动其他方法"></a>清除浮动其他方法</h3><ol>
<li><p>父级元素定义 height 。只适合高度固定的布局</p>
</li>
<li><p>父级元素也一起浮动。不推荐，会产生新的浮动问题</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/06/CSS基础知识点-float浮动/" data-id="ck4r400n80008l0w0cy7jmf93" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-背景和样式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/05/CSS基础知识点-背景和样式/" class="article-date">
  <time datetime="2019-08-05T08:57:43.000Z" itemprop="datePublished">2019-08-05</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/05/CSS基础知识点-背景和样式/">CSS基础知识点--背景和列表</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="背景样式"><a href="#背景样式" class="headerlink" title="背景样式"></a>背景样式</h2><ul>
<li><p>background-color：设置元素的背景颜色</p>
</li>
<li><p>background-image：把图像设置为背景</p>
</li>
<li><p>background-position：设置背景图像的起始位置</p>
</li>
<li><p>background-attachment：背景图像是否固定或者随着页面的其余部分滚动</p>
</li>
<li><p>background-repeat：设置背景图像是否重复及如何重复</p>
</li>
<li><p>background：简写属性。作用是将背景属性设置于一个声明</p>
</li>
</ul>
<h3 id="背景颜色"><a href="#背景颜色" class="headerlink" title="背景颜色"></a>背景颜色</h3><p>设置元素的背景颜色</p>
<blockquote>
<p>background-color：颜色 | transparent</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>transparent是全透明黑色（black）的速记法，类似rgba(0, 0, 0, 0)这样的值。</p>
</li>
<li><p>颜色值（颜色名 | RGB | 十六进制）</p>
</li>
<li><p>背景区包括内容、内边距（padding）和边框、不包括外边距（margin）</p>
</li>
</ul>
<h3 id="背景图片"><a href="#背景图片" class="headerlink" title="背景图片"></a>背景图片</h3><p>设置元素的背景图片</p>
<blockquote>
<p>background-image：URL | none</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>url地址可以是相对地址也可以是绝对地址</p>
</li>
<li><p>元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距 </p>
</li>
<li><p>默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复</p>
</li>
</ul>
<h3 id="背景图片重复"><a href="#背景图片重复" class="headerlink" title="背景图片重复"></a>背景图片重复</h3><p>设置元素的背景图片的重复方式</p>
<blockquote>
<p>background-repeat：repeat | no-repeat | repeat-x | repeat-y</p>
</blockquote>
<h3 id="背景图片显示方式"><a href="#背景图片显示方式" class="headerlink" title="背景图片显示方式"></a>背景图片显示方式</h3><p>设置元素的背景图片的显示方式</p>
<blockquote>
<p>background-attachment：scroll | fixed</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>scroll：默认值，背景图片随滚动条滚动</p>
</li>
<li><p>fixed：当页面的其余部分滚动时，背景图片不会移动</p>
</li>
</ul>
<h3 id="背景图片定位"><a href="#背景图片定位" class="headerlink" title="背景图片定位"></a>背景图片定位</h3><p>设置元素的背景图片的初始位置</p>
<blockquote>
<p>background-position：百分比 | 值 | top | right | bottom | left | center</p>
</blockquote>
<table>
<thead>
<tr>
<th>值</th>
<th>说明</th>
<th>注意</th>
</tr>
</thead>
<tbody><tr>
<td>长度值（x y）</td>
<td>第一个值水平位置，第二个值垂直位置</td>
<td>只写一个参数的话，第二个默认为居中</td>
</tr>
<tr>
<td>百分比（x% y%）</td>
<td>第一个时水平位置的百分比，第二个值垂直位置的百分比</td>
<td>只写一个参数的话，第二个默认为居中</td>
</tr>
<tr>
<td>top</td>
<td>顶部显示，相当于垂直方向0</td>
<td>只写一个参数的话，第二个默认为居中</td>
</tr>
<tr>
<td>right</td>
<td>右边显示，相当于水平方向100%</td>
<td>只写一个参数的话，第二个默认为居中</td>
</tr>
<tr>
<td>left</td>
<td>左边显示，相当于水平方向0</td>
<td>只写一个参数的话，第二个默认为居中</td>
</tr>
<tr>
<td>bottom</td>
<td>底边显示，相当于垂直方向100%</td>
<td>只写一个参数的话，第二个默认为居中</td>
</tr>
<tr>
<td>center</td>
<td>居中显示，相当于水平方向50%或者垂直方向50%</td>
<td>水平、垂直方向都居中</td>
</tr>
</tbody></table>
<h3 id="背景缩写"><a href="#背景缩写" class="headerlink" title="背景缩写"></a>背景缩写</h3><blockquote>
<p>background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]</p>
</blockquote>
<p>说明：</p>
<ul>
<li>各值之间用空格分割，不分先后顺序</li>
</ul>
<h2 id="列表样式"><a href="#列表样式" class="headerlink" title="列表样式"></a>列表样式</h2><ul>
<li><p>list-style-type：设置列表项标志的类型</p>
</li>
<li><p>list-style-image：将图像设置为列表项标志</p>
</li>
<li><p>list-style-position：设置列表中列表项标志的位置</p>
</li>
<li><p>list-style：简写属性。用于把所有列表的属性设置于一个声明</p>
</li>
</ul>
<h3 id="列表项标记"><a href="#列表项标记" class="headerlink" title="列表项标记"></a>列表项标记</h3><h4 id="设置列表项的标记样式类型"><a href="#设置列表项的标记样式类型" class="headerlink" title="设置列表项的标记样式类型"></a>设置列表项的标记样式类型</h4><blockquote>
<p>list-style-type：关键字 | none</p>
</blockquote>
<p>无序列表</p>
<table>
<thead>
<tr>
<th>值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>无标记</td>
</tr>
<tr>
<td>disc</td>
<td>实心的圆点</td>
</tr>
<tr>
<td>circle</td>
<td>空心的圆点</td>
</tr>
<tr>
<td>square</td>
<td>实心的方块</td>
</tr>
</tbody></table>
<p>有序列表</p>
<table>
<thead>
<tr>
<th>值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>无标记</td>
</tr>
<tr>
<td>decimal</td>
<td>从1开始的整数</td>
</tr>
<tr>
<td>lower-roman</td>
<td>小写罗马数字</td>
</tr>
<tr>
<td>upper-roman</td>
<td>大写罗马数字</td>
</tr>
<tr>
<td>lower-alpha</td>
<td>小写英文字母</td>
</tr>
<tr>
<td>upper-alpha</td>
<td>大写英文字母</td>
</tr>
</tbody></table>
<h4 id="使用图片设置列表项的标记"><a href="#使用图片设置列表项的标记" class="headerlink" title="使用图片设置列表项的标记"></a>使用图片设置列表项的标记</h4><blockquote>
<p>list-style-image：URL | none</p>
</blockquote>
<h3 id="列表项标记位置"><a href="#列表项标记位置" class="headerlink" title="列表项标记位置"></a>列表项标记位置</h3><p>设置列表项标记的位置</p>
<blockquote>
<p>list-style-position：inside | outside</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐</p>
</li>
<li><p>outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐</p>
</li>
</ul>
<h3 id="列表样式缩写"><a href="#列表样式缩写" class="headerlink" title="列表样式缩写"></a>列表样式缩写</h3><blockquote>
<p>list-style：list-style-type list-style-position list-style-image</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>值之间用空格分隔</p>
</li>
<li><p>顺序不固定</p>
</li>
<li><p>list-style-image会覆盖list-style-type的设置</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/05/CSS基础知识点-背景和样式/" data-id="ck4r400nf000jl0w09zfv894o" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-盒子模型" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/03/CSS基础知识点-盒子模型/" class="article-date">
  <time datetime="2019-08-03T08:42:13.000Z" itemprop="datePublished">2019-08-03</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/03/CSS基础知识点-盒子模型/">CSS基础知识点--盒子模型</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="宽度属性"><a href="#宽度属性" class="headerlink" title="宽度属性"></a>宽度属性</h2><p>宽度：</p>
<blockquote>
<p>width：长度值 | 百分比 | auto</p>
</blockquote>
<p>最大宽度：</p>
<blockquote>
<p>max-width：长度值 | 百分比 | auto</p>
</blockquote>
<p>最小宽度：</p>
<blockquote>
<p>min-width：长度值 | 百分比 | auto</p>
</blockquote>
<p>说明：设置块级元素和替换元素的内容宽度</p>
<h2 id="高度属性"><a href="#高度属性" class="headerlink" title="高度属性"></a>高度属性</h2><p>高度：</p>
<blockquote>
<p>height：长度值 | 百分比 | auto</p>
</blockquote>
<p>最大高度：</p>
<blockquote>
<p>max-height：长度值 | 百分比 | auto</p>
</blockquote>
<p>最小高度：</p>
<blockquote>
<p>min-height：长度值 | 百分比 | auto</p>
</blockquote>
<p>说明：设置块级元素和替换元素的内容高度</p>
<h2 id="哪些HTML元素可设置高和宽属性"><a href="#哪些HTML元素可设置高和宽属性" class="headerlink" title="哪些HTML元素可设置高和宽属性"></a>哪些HTML元素可设置高和宽属性</h2><ul>
<li><p>块级元素</p>
</li>
<li><p>替换元素</p>
</li>
</ul>
<p>例如：<code>&lt;input&gt;</code>、<code>&lt;img&gt;</code>、<code>&lt;textarea&gt;</code></p>
<h2 id="边框"><a href="#边框" class="headerlink" title="边框"></a>边框</h2><ul>
<li><p>边框宽度：border-width</p>
</li>
<li><p>边框颜色：border-color</p>
</li>
<li><p>边框样式：border-style</p>
</li>
</ul>
<h3 id="边框宽度"><a href="#边框宽度" class="headerlink" title="边框宽度"></a>边框宽度</h3><p>设置元素边框宽度</p>
<blockquote>
<p>border-width：thin | medium | thick | 长度值</p>
</blockquote>
<h3 id="边框颜色"><a href="#边框颜色" class="headerlink" title="边框颜色"></a>边框颜色</h3><p>设置元素边框颜色</p>
<blockquote>
<p>border-color：颜色 | transparent</p>
</blockquote>
<p>如果不给边框设置颜色，则边框颜色与元素内文本颜色一致</p>
<h3 id="边框样式"><a href="#边框样式" class="headerlink" title="边框样式"></a>边框样式</h3><p>设置元素边框样式</p>
<p>border-style：值</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>定义无边框。默认值</td>
</tr>
<tr>
<td>hidden</td>
<td>与none相同。除非在表格元素中解决边框冲突时</td>
</tr>
<tr>
<td>dotted</td>
<td>定义点状边框。在大多数浏览器中呈现为实线</td>
</tr>
<tr>
<td>dashed</td>
<td>定义虚线。在大多数浏览器中呈现为实线</td>
</tr>
<tr>
<td>solid</td>
<td>定义实线</td>
</tr>
<tr>
<td>double</td>
<td>定义双线</td>
</tr>
<tr>
<td>groove</td>
<td>定义3D凹槽边框</td>
</tr>
<tr>
<td>ridge</td>
<td>定义3D垄状边框</td>
</tr>
<tr>
<td>inset</td>
<td>定义3Dinset边框</td>
</tr>
<tr>
<td>outset</td>
<td>定义3Doutset边框</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承边框样式</td>
</tr>
</tbody></table>
<h3 id="四个方向的边框"><a href="#四个方向的边框" class="headerlink" title="四个方向的边框"></a>四个方向的边框</h3><p>4个不同方向来表示（上、下、左、右）</p>
<p>表示：</p>
<ul>
<li><p>border-[left | right | top | bottom] - width</p>
</li>
<li><p>border-[left | right | top | bottom] - color</p>
</li>
<li><p>border-[left | right | top | bottom] - style</p>
</li>
</ul>
<h3 id="边框缩写"><a href="#边框缩写" class="headerlink" title="边框缩写"></a>边框缩写</h3><p>所有方向：</p>
<blockquote>
<p>border: [宽度] | [样式] | [颜色]</p>
</blockquote>
<p>不同方向：</p>
<blockquote>
<p>border-top: [宽度] | [样式] | [颜色]</p>
</blockquote>
<blockquote>
<p>border-left: [宽度] | [样式] | [颜色]</p>
</blockquote>
<blockquote>
<p>border-right: [宽度] | [样式] | [颜色]</p>
</blockquote>
<blockquote>
<p>border-bottom: [宽度] | [样式] | [颜色]</p>
</blockquote>
<h2 id="内边距（padding）属性"><a href="#内边距（padding）属性" class="headerlink" title="内边距（padding）属性"></a>内边距（padding）属性</h2><p>设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上、右、左、下）</p>
<ul>
<li><p>padding-top：长度值 | 百分比</p>
</li>
<li><p>padding-right：长度值 | 百分比</p>
</li>
<li><p>padding-bottom：长度值 | 百分比</p>
</li>
<li><p>padding-left：长度值 | 百分比</p>
</li>
</ul>
<p>说明：值不能为负</p>
<h3 id="内边距属性缩写"><a href="#内边距属性缩写" class="headerlink" title="内边距属性缩写"></a>内边距属性缩写</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">padding：值1；//4个方向都为值1</span><br><span class="line"></span><br><span class="line">padding：值1 值2；//上下=值1，左右=值2</span><br><span class="line"></span><br><span class="line">padding：值1 值2 值3；//上=值1，左右=值2，下=值3</span><br><span class="line"></span><br><span class="line">padding：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4</span><br></pre></td></tr></table></figure>

<h2 id="外边距（margin）属性"><a href="#外边距（margin）属性" class="headerlink" title="外边距（margin）属性"></a>外边距（margin）属性</h2><p>设置元素与元素之间的举例（外边距），4个方向（上、右、下、左）</p>
<ul>
<li><p>margin-top：长度值 | 百分比 | auto</p>
</li>
<li><p>margin-right：长度值 | 百分比 | auto</p>
</li>
<li><p>margin-bottom：长度值 | 百分比 | auto</p>
</li>
<li><p>margin-left：长度值 | 百分比 | auto</p>
</li>
</ul>
<p>说明：值可为负</p>
<ul>
<li><p>margin的值为auto，实现水平方向居中显示效果</p>
</li>
<li><p>由浏览器计算外边距</p>
</li>
</ul>
<h3 id="外边距属性缩写"><a href="#外边距属性缩写" class="headerlink" title="外边距属性缩写"></a>外边距属性缩写</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">margin：值1；//4个方向都为值1</span><br><span class="line"></span><br><span class="line">margin：值1 值2；//上下=值1，左右=值2</span><br><span class="line"></span><br><span class="line">margin：值1 值2 值3；//上=值1，左右=值2，下=值3</span><br><span class="line"></span><br><span class="line">margin：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4</span><br></pre></td></tr></table></figure>

<h3 id="外边距要点"><a href="#外边距要点" class="headerlink" title="外边距要点"></a>外边距要点</h3><ul>
<li><p>垂直方向，两个相邻元素都设置外边距，外边距会发生合并</p>
</li>
<li><p>合并后外边距高度 = 两个发生合并外边距的高度中最大值</p>
</li>
</ul>
<h2 id="盒子模型计算"><a href="#盒子模型计算" class="headerlink" title="盒子模型计算"></a>盒子模型计算</h2><p>盒子在页面中所占的宽度 = 左边距 + 左边框 + 左填充 + 内容宽度 + 右边距 + 右边框 + 右填充</p>
<p>高度类似</p>
<p>注意：</p>
<ol>
<li><p>如果没有Doctype文档类型声明，各浏览器按照自己的方式解析。</p>
</li>
<li><p>如果有Doctype文档类型声明，按照标准盒子模型来解析。</p>
</li>
</ol>
<h2 id="display属性"><a href="#display属性" class="headerlink" title="display属性"></a>display属性</h2><p>display有四个属性值，分别是：</p>
<ol>
<li><p>inline：元素将显示为内联元素，元素前后没有换行符</p>
</li>
<li><p>block：元素将显示为块级元素，元素前后会带有换行符</p>
</li>
<li><p>inline-block：元素将显示为行内块元素，元素呈现为inline，具有block相应特性</p>
</li>
<li><p>none：此元素不会被显示</p>
</li>
</ol>
<h3 id="重点"><a href="#重点" class="headerlink" title="重点"></a>重点</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">display: flex;</span><br><span class="line">justify-content: space-between;</span><br><span class="line">// 两个属性结合使用可以让元素在容器中左右均匀分布。最常用于移动端开发</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/03/CSS基础知识点-盒子模型/" data-id="ck4r400nc000dl0w0uc5kptwc" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-CSS字体样式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/01/CSS基础知识点-CSS字体样式/" class="article-date">
  <time datetime="2019-08-01T10:57:31.000Z" itemprop="datePublished">2019-08-01</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/01/CSS基础知识点-CSS字体样式/">CSS基础知识点--CSS字体样式(font)</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="文字样式属性"><a href="#文字样式属性" class="headerlink" title="文字样式属性"></a>文字样式属性</h2><table>
<thead>
<tr>
<th>文字样式</th>
<th>英文</th>
</tr>
</thead>
<tbody><tr>
<td>字体</td>
<td>font-family</td>
</tr>
<tr>
<td>文字大小</td>
<td>font-size</td>
</tr>
<tr>
<td>文字颜色</td>
<td>color</td>
</tr>
<tr>
<td>文字粗细</td>
<td>font-weight</td>
</tr>
<tr>
<td>文字样式</td>
<td>font-style</td>
</tr>
</tbody></table>
<h2 id="font-family字体属性"><a href="#font-family字体属性" class="headerlink" title="font-family字体属性"></a>font-family字体属性</h2><p>font-family属性值：具体字体名，字体集</p>
<p>字体集：</p>
<ul>
<li><p>Serif</p>
</li>
<li><p>Sans-serif</p>
</li>
<li><p>Monospace</p>
</li>
<li><p>Cursive</p>
</li>
<li><p>Fantasy</p>
</li>
</ul>
<h2 id="font-size文字大小"><a href="#font-size文字大小" class="headerlink" title="font-size文字大小"></a>font-size文字大小</h2><blockquote>
<p>font-size: 绝对单位 | 相对单位</p>
</blockquote>
<h3 id="绝对单位"><a href="#绝对单位" class="headerlink" title="绝对单位"></a>绝对单位</h3><table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>in</td>
<td>Inch，英寸  1英寸=2.54厘米</td>
</tr>
<tr>
<td>cm</td>
<td>厘米  1厘米=0.394英寸</td>
</tr>
<tr>
<td>mm</td>
<td>毫米  1毫米=0.1厘米</td>
</tr>
<tr>
<td>pt</td>
<td>磅，印刷的点数  72磅=1英寸</td>
</tr>
<tr>
<td>pc</td>
<td>Pica，1pc=12pt</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>属性值</th>
<th>CSS2缩放系数1.2</th>
</tr>
</thead>
<tbody><tr>
<td>xx-small</td>
<td>9px</td>
</tr>
<tr>
<td>x-small</td>
<td>11px</td>
</tr>
<tr>
<td>small</td>
<td>13px</td>
</tr>
<tr>
<td>medium（浏览器默认大小）</td>
<td>16px</td>
</tr>
<tr>
<td>large</td>
<td>19px</td>
</tr>
<tr>
<td>x-large</td>
<td>23px</td>
</tr>
<tr>
<td>xx-large</td>
<td>28px</td>
</tr>
</tbody></table>
<p>绝对大小，不能随浏览器分辨率或父元素大小的改变而改变</p>
<h3 id="相对单位"><a href="#相对单位" class="headerlink" title="相对单位"></a>相对单位</h3><ul>
<li><p>px 像素</p>
</li>
<li><p>em / %</p>
</li>
</ul>
<p>移动端一般不用px</p>
<h2 id="color文字颜色"><a href="#color文字颜色" class="headerlink" title="color文字颜色"></a>color文字颜色</h2><p>定义元素内文字颜色</p>
<p>语法：</p>
<blockquote>
<p>color：颜色名 | 十六进制 | RGB</p>
</blockquote>
<h2 id="font-weight文字粗细"><a href="#font-weight文字粗细" class="headerlink" title="font-weight文字粗细"></a>font-weight文字粗细</h2><p>为元素内文字设置粗细</p>
<p>语法：</p>
<blockquote>
<p>font-weight: normal | bold | bolder | lighter | 100~900</p>
</blockquote>
<p>说明：</p>
<p>默认值：normal</p>
<p>400等同于normal，而700等同于bold</p>
<h2 id="font-style文字样式"><a href="#font-style文字样式" class="headerlink" title="font-style文字样式"></a>font-style文字样式</h2><p>为元素内文字设置样式</p>
<p>语法：</p>
<blockquote>
<p>font-style: normal | italic | oblique</p>
</blockquote>
<h2 id="font-variant字体变形"><a href="#font-variant字体变形" class="headerlink" title="font-variant字体变形"></a>font-variant字体变形</h2><p>设置元素中文本为小型大写字母</p>
<p>语法：</p>
<blockquote>
<p>font-variant：normal | small-caps</p>
</blockquote>
<h2 id="font属性简写"><a href="#font属性简写" class="headerlink" title="font属性简写"></a>font属性简写</h2><p>语法：</p>
<blockquote>
<p>font：font-style font-variant font-weight font-size/line-height font-family</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>值之间空格隔开</p>
</li>
<li><p>注意书写顺序</p>
</li>
<li><p>如果font-family有多个值，用逗号分隔开</p>
</li>
</ul>
<p>注意：</p>
<ol>
<li><p>同时设置font-size和font-family，属性才起作用</p>
</li>
<li><p>前三者顺序是任意的</p>
</li>
<li><p>后两者顺序是font-size在前，font-family在后</p>
</li>
<li><p>如果有前面三者任意一种存在，必须在font-size和font-family前面</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/01/CSS基础知识点-CSS字体样式/" data-id="ck4r400kf0000l0w06vcbmalk" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-CSS文本样式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/01/CSS基础知识点-CSS文本样式/" class="article-date">
  <time datetime="2019-08-01T07:16:05.000Z" itemprop="datePublished">2019-08-01</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/01/CSS基础知识点-CSS文本样式/">CSS基础知识点--CSS文本样式(text)</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="文本样式属性"><a href="#文本样式属性" class="headerlink" title="文本样式属性"></a>文本样式属性</h2><h3 id="text-align"><a href="#text-align" class="headerlink" title="text-align"></a>text-align</h3><p>设置元素内文本对齐方式</p>
<p>语法：</p>
<blockquote>
<p>text-algin：left | right | center | justify</p>
</blockquote>
<p>注：该属性只对块级元素的设置有效</p>
<h3 id="line-height属性"><a href="#line-height属性" class="headerlink" title="line-height属性"></a>line-height属性</h3><p>设置元素中文本行高</p>
<p>语法：</p>
<blockquote>
<p>line-height：长度值 | 百分比</p>
</blockquote>
<p>em/%都会相对于字体大小来变化</p>
<h3 id="vertical-align"><a href="#vertical-align" class="headerlink" title="vertical-align"></a>vertical-align</h3><p>设置元素内容的垂直方式</p>
<p>语法：</p>
<blockquote>
<p>vertical-align：baseline(默认) | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比</p>
</blockquote>
<p>说明：</p>
<ul>
<li><p>对行内元素有效，对块级元素无效</p>
</li>
<li><p>长度和百分比，上移为正，下移为负</p>
</li>
</ul>
<h3 id="水平居中与垂直居中"><a href="#水平居中与垂直居中" class="headerlink" title="水平居中与垂直居中"></a>水平居中与垂直居中</h3><p>技巧：</p>
<ul>
<li><p>单行文字垂直居中：将line-height属性设置和元素一样高</p>
</li>
<li><p>单行文字水平对齐：text-align：center</p>
</li>
<li><p>多行文字垂直居中：</p>
<ol>
<li><p>先用display属性将div转换为table的表格元素，变为行内元素（display：table-cell），同时也将div的父元素div也转换为table元素（display：table）</p>
</li>
<li><p>再用vertical-align：middle将单元格垂直居中</p>
</li>
</ol>
</li>
<li><p>多行文字水平居中：text-align：center</p>
</li>
</ul>
<h3 id="其他文本样式"><a href="#其他文本样式" class="headerlink" title="其他文本样式"></a>其他文本样式</h3><table>
<thead>
<tr>
<th>字体属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>word-spacing</td>
<td>设置元素内<font color="red">单词</font>之间间距</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>设置元素内<font color="red">字母</font>之间间距</td>
</tr>
<tr>
<td>text-transform</td>
<td>设置元素内文本的大小写  capitalize / uppercase / lowercase / none</td>
</tr>
<tr>
<td>text-decoration</td>
<td>设置元素内文本的装饰  underline / overline / line-through / blink / none</td>
</tr>
</tbody></table>
<h4 id="text-indent"><a href="#text-indent" class="headerlink" title="text-indent"></a>text-indent</h4><p>主要作用：首行缩进</p>
<p>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text-indent:2em;</span><br></pre></td></tr></table></figure>

<h2 id="CSS文本样式应用"><a href="#CSS文本样式应用" class="headerlink" title="CSS文本样式应用"></a>CSS文本样式应用</h2><p>经验技巧：</p>
<ol>
<li><p>网页制作从整体到局部</p>
</li>
<li><p>借助手册和网络</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/01/CSS基础知识点-CSS文本样式/" data-id="ck4r400n70006l0w0dnx3rpze" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/7/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><a class="page-number" href="/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/page/9/">9</a><a class="page-number" href="/page/10/">10</a><span class="space">&hellip;</span><a class="page-number" href="/page/12/">12</a><a class="extend next" rel="next" href="/page/9/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>